<template>
	<scroll-view
		class="recommend_view"
		scroll-y v-if="recommends.length > 0"
		@scrolltolower="handleToLower">
		<!-- 推荐模块 -->
		<view class="home-recommends">
			<navigator class="recommends_wrap"
				v-for="item in recommends"
				:key="item.id"
				:url="`/pages/album/index?id=5e5cf679e7bce739db1281e4`">
				<image :src="item.thumb" mode="widthFix"></image>
			</navigator>
		</view>
	
		<!-- 月份 -->
		<view class="month_wrap">
			<view class="month_title">
				<view class="month_info">
					<text>{{monthes.DD}}/ </text>{{monthes.MM}}月
				</view>
				<view class="month_text">{{monthes.title}}</view>
			</view>
			<view class="month_more">更多 ></view>
		</view>
		<view class="month_content">
			<view class="month_item"
				v-for="(item, index) in monthes.items"
				:key="item.id">
				<image :src="item.thumb + item.rule.replace('$<Height>', 360)" mode="aspectFill"></image>
			</view>
		</view>
		
		<!-- 热门 -->
		<view class="hots_wrap">
			<view class="hots_title">
				<text>热门</text>
			</view>
			<view class="hots_content">
				<view 
					class="hots_item"
					v-for="item in hots"
					:key="item.id">
					<image :src="item.thumb" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import moment from "moment"
import goDetail from '../../../../components/goDetail/index.vue'
export default {
	data() {
		return {
			// 推荐列表
			recommends: [],
			monthes: {},
			// 热门
			hots: [],
			// 接口请求参数
			params: {
				limit: 30,
				order: "hot",
				skip: 0
			},
			// 是否还有下一页
			hasMore: true
		}
	},
	components: {
		goDetail
	},
	mounted() {
		uni.setNavigationBarTitle({
			title: "推荐"
		})
		this.getRecommendImage()
	},
	methods: {
		// 发送网络请求获取数据
		async getRecommendImage() {
			const {res} = await this.$request({
				url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
				data: this.params
			})
			
			// 判断是否还有下一页数据
			if (res.vertical.length < this.params.limit) {
				this.hasMore = false
				return
			}
			
			// 不必重复请求的数据
			if (this.recommends.length === 0) {
				// 推荐模块
				this.recommends = res.homepage[1].items
				// 月份模块
				this.monthes = res.homepage[2]
				// console.log(res)
				// 将时间戳 转为 18 / 月
				this.monthes.MM = moment(this.monthes.stime).format("MM")
				this.monthes.DD = moment(this.monthes.stime).format("DD")
			}
						
			// 获取热门列表数据
			this.hots = [...this.hots, ...res.vertical]
		},
		// 上拉加载更多
		handleToLower() {
			/*
			1.修改参数 skip+=limit
			2.重新发送请求
			3.请求回来成功 hots数据叠加
			*/
		 if (this.hasMore) {
			 this.params.skip += this.params.limit
			 this.getRecommendImage()
		 } else {
			 // 弹窗提示用户
			 uni.showToast({
			 	title: "没有数据了",
				icon: 'none'
			 })
		 }
		}
	}
}
</script>

<style lang="scss" scoped>
.recommend_view {
	height: calc(100vh - 36px);
}
.home-recommends {
	display: flex;
	flex-wrap: wrap;
	.recommends_wrap {
		width: 50%;
		border: 3rpx solid #fff;
	}
}
.month_wrap {
	// border-bottom: 1px solid #000000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	.month_title {
		// flex: 1;
		display: flex;
		align-items: center;
		.month_info {
			color: $color;
			font-size: 30rpx;
			text {
				font-size: 36rpx;
				font-weight: 600;
			}
		}
		.month_text {
			font-size: 24rpx;
			font-weight: 600;
			color: #666;
			margin-left: 30rpx;
		}
	}
	.month_more {
		color: $color;
	}
}
.month_content {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	.month_item {
		width: 33.33%;
		padding: 5rpx;
	}
}
.hots_wrap {
	.hots_title {
		padding: 20rpx;
		text {
			border-left: 20rpx solid $color;
			padding-left: 20rpx;
			font-size: 34rpx;
			font-weight: 600;
		}
	}
	.hots_content {
		display: flex;
		flex-wrap: wrap;
		.hots_item {
			width: 33.33%;
			border: 5rpx solid #fff;
		}
	}
}
</style>
